<template>
	<view class="content">
		<web-view class="web-view" :src="webUrl" ref='webview' @message="handleMessage"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				webUrl: '',	
				webviewLoaded: false
			};
		},
		onLoad() {
			this.webUrl = this.COFIG.staticUrl;
		},
		onReady(){
			this.renderView()
		},

		methods: {
			handleMessage(evt) {
				let self = this;
				let obj = evt?.detail?.data;
				if (obj[0].action == "authorizeSetting") {//获取手机权限
					try {
						const appAuthorizeSetting = uni.getAppAuthorizeSetting();
						if(appAuthorizeSetting?.locationAuthorized != "authorized"){//未授权定位服务
							uni.showModal({
								title: '温馨提示',
								content: '请打开手机设置 > 隐私 > 定位服务，允许该浏览器访问位置信息',
								success: function (res) {
									if (res.confirm) {
										uni.openAppAuthorizeSetting({
											success (res) {
												console.log(res)
											}
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							})
						}
						else{
							// 确保webview已加载后再发送
							let currentWebview = this.$scope?.$getAppWebview(); //获取当前web-view
							let webview = currentWebview?.children()[0];
							webview.evalJS(`
								if (typeof window.getLocationApp === 'function') {
								  window.getLocationApp();
								} else {
									uni.showToast({
										title: '获取定位失败，请稍后再再试',
										duration: 2000
									});
								}
							`)
						}
					} catch (e) {
				
					}
				}
			},
			
			renderView(){
				let height = 0; //定义动态的高度变量
				let statusbar = 0; // 动态状态栏高度
				let safeAreaBottom = 0
				uni.getSystemInfo({ // 获取当前设备的具体信息
					success: (sysinfo) => {
						statusbar = sysinfo.statusBarHeight;
						height = sysinfo.windowHeight;
						safeAreaBottom = sysinfo.safeAreaInsets?.bottom
					}
				});
				let currentWebview = this.$scope.$getAppWebview(); //获取当前web-view
				setTimeout(function() {
					var wv = currentWebview.children()[0];
					wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
						top: statusbar, //此处是距离顶部的高度，应该是你页面的头部
						height: height - statusbar - safeAreaBottom, //webview的高度
					})
				}, 200); //如页面初始化调用需要写延迟
			}
		},
	};
</script>

<style scoped lang="scss">
	.page-view{
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		.nav-bar {
			background-color: #F6F6F6;
		}
		.box{
			height: 100%;
			position: relative;
			button{
				width: 70%;
				margin: 400rpx auto 0 auto;
			}
		}
	}
	.content{
		display: flex;
		align-items: center;
	}
	.web-view{
		height: 300px;
	}
	.callback{
		// position: fixed;
		// top: 50%;
		// left: 50%;
		background: red;
		z-index: 999999;
		color: #fff;
		width: 200px;
		height: 100px;
		text-align: center;
	}
</style>